<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Title</title>
    <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="lib/font-awesome/css/font-awesome.css">
    <link rel="stylesheet" href="lib/responsive-nav/responsive-nav.css">
    <link rel="stylesheet" href="lib/responsive-nav/styles.css"><!--<![endif]-->
    <link rel="stylesheet" href="css/re_index.css"><!--<![endif]-->
    <!--[if gt IE 8]><!-->
    <link rel="stylesheet" href="lib/responsive-nav/styles.css"><!--<![endif]-->
    <script src="lib/responsive-nav/responsive-nav.js"></script>
</head>

<style>

    .panel .panel-title a {
        color: #fff;
        font-weight: bold;
    }

    .panel .panel-body a {
        color: #fff;
        font-weight: bold;
    }

    .article_title {
        float: none;
        font-size: 36px;
    }

    .center_box {
        margin-top: 20px;
    }

    .breadcrumb {
        padding: 15px 15px;
        background-color: #555a59;
    }

    .article_title_icon {
        font-size: 25px;
        color: #fff;
    }

    .article_title_val {
        font-size: 20px;
        margin-left: 20px;
        color: #fff;
        font-weight: 700;
    }

    .article_title_time {
        font-size: 20px;
        margin-right: 15%;
        color: #280303;
        font-weight: 500;
    }

    .table tr td {
        padding-left: 10% !important;
        line-height: 35px !important;
        border-top: 1px solid #dedede !important;
        background-color: #e1c6c600 !important;
        padding: 8px;
        vertical-align: top;
    }

    .table tr td a {
        color: #333 !important;
        font-size: 22px;
        margin-left: 20px;
    }

    .table tr td:hover {

        animation: td_myfirst 1.5s;

    }

    @keyframes td_myfirst {
        0% {
            padding-left: 10%;
        }
        100% {
            padding-left: 20%;
        }
    }

    @-webkit-keyframes td_myfirst /* Safari 与 Chrome */
    {
        0% {
            padding-left: 10%;
        }
        100% {
            padding-left: 20%;
        }
    }

    .nav-collapse a {

        padding: 1.3em 2em;

    }

    .article_level_title {
        position: absolute;
        top: 45%;
        right: 10px;
        z-index: 9999;
        background: #444 url(/images/debut_dark.png) repeat;
        border-radius: 8px;

        -webkit-box-shadow: #666 0px 0px 10px;
        -moz-box-shadow: #666 0px 0px 10px;
        padding: 2rem 1rem 0rem 2rem;
        color: #fff;
        font-weight: bold;
        display: none;

    }

    img {
        width: 65% !important;
    }

    #data_article_id {
        font-size: 20px;
        color: #555a59;
    }

</style>
<body>
<div class="container-fluid">
  <!--右侧悬浮菜单-->
    <div class="article_level_title">
        <table class="table" id="nav_titlt_mix_id">


        </table>

    </div>

    <!--左侧菜单-->
    <div role="navigation" id="foo" class="nav-collapse">
        <ul id="nav_titlt_id">

        </ul>
    </div>
    <!--中间数据-->
    <div role="main" class="main">
        <a href="#nav" class="nav-toggle">Menu</a>
        <!--中间菜单-->
        <div class="center_box center_title_list">
            <h1 class="article_title">小陈陈的博客</h1>
            <ol class="breadcrumb"><span class="glyphicon glyphicon-education pull-left article_title_icon"
                                         aria-hidden="true"></span>
                <span class="article_title_val article_name_class">小宝贝</span>
            </ol>
            <table class="table table-hover" id="nav_level_id">


            </table>
        </div>

        <!--中间具体数据-->
        <div class="center_box" id="data_article_id">


        </div>

    </div>


</div>
</body>
<script>
    var navigation = responsiveNav("foo", {customToggle: ".nav-toggle"});
</script>
<script src="lib/jquery/jquery.min.js"></script>
<script type="text/javascript" src="js/template-web.js"></script>
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
<script src="lib/html5shiv/html5shiv.min.js"></script>
<script>

    $(function () {

        var url = "/LanguageTitleController/findAllLanguage";
        var url2 = "/LanguageTitleController/findLevel";
        var url3 = "/ArticleController/getArticleALL";

        //  加载的左侧菜单
        $.ajax({
            type: 'post',
            url: url,
            dataType: 'json',
            data: {},
            success: function (data) {

                if (data.code == '00') {
                    var pageHtml = template('nav_titlt_temp', data);
                    $("#nav_titlt_id").html(pageHtml);
                } else {

                }
            },
            error: function (jqXHR, textStatus, errorThrown) {
                console.log(jqXHR)
                console.log(textStatus)
                console.log(errorThrown)
            }
        });

        //点击左侧菜单
        $(document).on("click", ".data_href_class", function () {
            var paramData = {};

            var id = $(this).attr("data-id");
            var name = $(this).attr("data-name");
           $(".article_name_class").html(name);
            paramData["language_id"] = id;
            $.ajax({
                type: 'post',
                url: url2,
                dataType: 'json',
                data: paramData,
                success: function (data) {

                    if (data.code == '00') {
                        $(".center_title_list").show(); //隐藏中间菜单列表
                        $("#data_article_id").hide(); //隐藏中间文章

                        var pageHtml = template('nav_level_temp', data);
                        $("#nav_level_id").html(pageHtml);


                        var pageHtml = template('nav_titlt_mix_temp', data);
                        $("#nav_titlt_mix_id").html(pageHtml);


                    } else {

                    }
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    console.log(jqXHR)
                    console.log(textStatus)
                    console.log(errorThrown)
                }
            });
        });
        //点击中间文章菜单
        $(document).on("click", ".data_article_class", function () {
            var paramData = {};
            var id = $(this).attr("data-id");
            paramData["pid"] = id;
            $.ajax({
                type: 'post',
                url: url3,
                dataType: 'json',
                data: paramData,
                success: function (data) {

                    if (data.code == '00') {
                        $(".center_title_list").hide(); //隐藏中间菜单列表
                        $(".article_level_title").show(); //显示右侧小菜单
                        $("#data_article_id").show(); //显示中间数据

                        var html = ' <h1 class="article_title">小陈陈的博客</h1>';
                        $.each(data.data, function (index, item) {
                            html += ' <ol class="breadcrumb"><span class="glyphicon glyphicon-education pull-left article_title_icon"  aria-hidden="true"></span>\n' +
                                '        <span class="article_title_val">' + item.name + '</span>\n' +
                                '    </ol>\n' +
                                '      <div>' + item.desc + '</div>';
                        });
                        $("#data_article_id").html(html);
                    } else {

                    }
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    console.log(jqXHR)
                    console.log(textStatus)
                    console.log(errorThrown)
                }
            });
        });
    });

</script>

<!-- 数据 -->
<script id="nav_titlt_temp" type="text/html">

    <% for(var i = 0 ; i < data.length ; i ++){ %>

    <li>

        <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingi<%= i+1 %>">
                <h4 class="panel-title">
                    <a class="collapsed  " role="button" data-toggle="collapse" data-parent="#accordion"
                       href="#collapsei<%= i+1 %>" aria-expanded="false" aria-controls="collapsei<%= i+1 %>">
                        <%=data[i].name%> <span class="glyphicon glyphicon-menu-right pull-right"
                                                aria-hidden="true"></span>
                    </a>
                </h4>
            </div>
            <div id="collapsei<%= i+1 %>" class="panel-collapse collapse " role="tabpanel"
                 aria-labelledby="headingi<%= i+1 %>">
                <% for(var j = 0 ; j < data[i].datas.length ; j ++){ %>
                <div class="panel-body">
                    <a href="#" class="data_href_class"   data-id="<%=data[i].datas[j].id%>"  data-name="<%=data[i].datas[j].name%>"><%=data[i].datas[j].name%>
                        <span class="glyphicon glyphicon-grain pull-right" aria-hidden="true"></span>
                    </a>
                </div>
                <%}%>

            </div>
        </div>

    </li>


    <%}%>

</script>


<script id="nav_level_temp" type="text/html">

    <% for(var i = 0 ; i < data.length ; i ++){ %>

    <tr>
        <td class="active data_article_class " data-id="<%=data[i].id%>">
            <span class="glyphicon glyphicon-pencil pull-left article_title_icon" aria-hidden="true"></span>
            <a href="#"> <%=data[i].name%></a>
            <span class="pull-right article_title_time"> <%=data[i].update_time%></span>
        </td>
    </tr>


    <%}%>

</script>

<script id="data_article_temp" type="text/html">
    <h1 class="article_title">小陈陈的博客</h1>
    <% for(var i = 0 ; i < data.length ; i ++){ %>
    <ol class="breadcrumb"><span class="glyphicon glyphicon-education pull-left article_title_icon"
                                 aria-hidden="true"></span>
        <span class="article_title_val"><%=data[i].name%></span>
    </ol>
    <div><%=data[i].desc%></div>
    <%}%>
</script>

<script id="nav_titlt_mix_temp" type="text/html">
    <% for(var i = 0 ; i < data.length ; i ++){ %>

    <tr class="data_article_class" data-id="<%=data[i].id%>">
        <td>
            <span class="text-center"><%=data[i].name%></span>
        </td>
    </tr>

    <%}%>
</script>

</html>